<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>排他</title>
    <style>
        button{
            float: left;
            width: 200px;
            height: 50px;
            border: 2px solid #000;
            outline: none;
        }
        .red{
            background: #fff;
            border-bottom: none;
        }
        div{
            float: left;
            width: 1000px;
            height: 300px;
            border:2px solid #000;
            border-top: none;
            background: url(123/6.png);
        }
    </style>
</head>
<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    <div id="div"></div>
    <script>
    var buttons = document.getElementsByTagName("button");
    var div = document.getElementById("div");
    for(var i = 0;i<buttons.length;i++){
        buttons[i].index = i;
        buttons[i].onclick = function(){
            for(var j=0;j<buttons.length;j++){
                buttons[j].className = ""
            }
            this.className = "red";
            div.style.background = "url(123/"+(this.index+1)+".png)"
        }
    }
    </script>
</body>
</html>